<script
	lang="ts"
	setup
>
import { userAuthAuditListGet } from '@/api'
import FullHeightTable from '@/components/FullHeightTable.vue'
import GoodsAuditIdCardTypeSelector from '@/components/GoodsAuditIdCardTypeSelector.vue'
import GoodsAuditStatusSelector from '@/components/GoodsAuditStatusSelector.vue'
import SearchInput from '@/components/SearchInput.vue'
import SubHeader from '@/components/SubHeader.vue'
import { USER_AUTH_STATUS_BUTTON, USER_AUTH_STATUS_BUTTON_COLOR, } from '@/const/user';
import { useRenderAction } from '@/hooks/useRenderActions'
import { auditUserColumns } from '@/tableColumns/user'
import type { OUserAuthAuditListGetItem } from '@/typed/response'
import { OUserAuthAuditListGetItemValue } from '@/typed/response.value'
import AuditModal from '@/views/console/user/components/AuditModal.vue'
import UserDetail from '@/views/console/user/components/UserDetail.vue'
import type { DataTableProps } from 'naive-ui'
import { ref } from 'vue'

const table = ref()
const showAudit = ref(false)
const showDetail = ref(false)
const userDetail = ref<OUserAuthAuditListGetItem>({
	...OUserAuthAuditListGetItemValue
})
const filterPrams = ref<any>({
	phone: '',
	type: undefined,
	status: undefined,
})
const tableProps = ref<DataTableProps>({
	scrollX: 1000,
	rowKey: (item) => item.id,
	columns: (auditUserColumns || []).concat([
		{
			title: '操作',
			key: 'actions',
			width: 170,
			fixed: 'right',
			align: 'center',
			render: item => useRenderAction([
				{
					label: USER_AUTH_STATUS_BUTTON[item.status],
					type: USER_AUTH_STATUS_BUTTON_COLOR[item.status],
					round: true,
					onClick: () => {
						if (item.status !== 0) {
							return;
						}
						userDetail.value = item;
						showAudit.value = true;
					}
				},
				{
					label: '详情',
					type: 'default',
					round: true,
					onClick: () => {
						userDetail.value = item;
						showDetail.value = true;
					}
				},
			])
		}
	])
})

function onAudit() {
	table.value.reload()
	showAudit.value = false
}
</script>

<template>
	<n-layout>
		<sub-header>
			<template #right>
				<GoodsAuditIdCardTypeSelector v-model:value="filterPrams.type"/>
				<GoodsAuditStatusSelector v-model:value="filterPrams.status"/>
				<SearchInput
					v-model:value="filterPrams.phone"
					placeholder="手机号搜索"
					width="210"
				/>
			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:params="filterPrams"
				:table-props="tableProps"
				:table-request="userAuthAuditListGet"
			/>
		</n-layout>
		<UserDetail
			v-model:show="showDetail"
			:id="userDetail.userId"
		/>
		<AuditModal
			v-model:show="showAudit"
			v-if="userDetail.id && userDetail.id!==-1"
			:id="userDetail.id.toString()"
			@audit="onAudit"
		/>
	</n-layout>
</template>
<style
	lang="less"
	scoped
>
.content {
	padding: 0 20px 20px 20px;

	header {
		padding: 20px 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}
}
</style>
